<template>
  <div class="scroll-bar">
    <div
      class="left-btn"
      @click="scrollHandle('diff')"
      v-show="isShowBtn"
    >
      <img
        src="@/assets/login/left-btn.png"
        alt=""
      >
    </div>
    <div class="scroll-bar-wc">
      <div
        class="ly-tag"
        v-for="(tag,index) in routerData"
        :key="index"
        :class="$route.name === tag.name ? 'ly-tag tagActive': 'ly-tag'"
        @click="handerChange(tag)"
        :title="tag.label"
      >
        <div class="tag-text">{{tag.label}}</div>
        <div
          v-if="index === 0 ? false : true"
          :class="$route.name === tag.name ? 'el-icon-close h-c-dds tagActive' : 'el-icon-close h-c-dds'"
          @click.stop="removeTag(tag)"
        ></div>
      </div>
    </div>
    <div
      class="right-btn"
      @click="scrollHandle('add')"
      v-show="isShowBtn"
    >
      <img
        src="@/assets/login/right-btn.png"
        alt=""
      >
    </div>
  </div>
</template>
<script>
export default {
  props: {
    routerData: {
      defalut: [],
    },
  },
  data() {
    return {
      //总体长度
      allWidth: 0,
      //每次滑动的距离
      scrollLeft: 200,
      isShowBtn: false,
    };
  },
  created() {
    this.init();
  },
  watch: {
    routerData() {
      this.init();
    },
  },
  methods: {
    removeTag(data) {
      this.init();
      this.$parent.removeTag(data);
    },
    handerChange(data) {
      this.$parent.handerChange(data);
    },
    init() {
      const self = this;
      setTimeout(() => {
        self.setWidth();
        self.setNowLeft();
        $(window).resize(() => {
          let nowLleft = $(".scroll-bar-wc").position().left;
          let containWidth = $(".scroll-bar").width();
          if (self.allWidth > containWidth) {
            if (Math.abs(nowLleft) > this.allWidth - containWidth) {
              $(".scroll-bar-wc").css({
                left: "-" + (this.allWidth - containWidth) + "px",
              });
            }
          } else {
          }

          self.showBtn();
        });
      }, 50);
    },
    setNowLeft() {
      if (this.routerData.length > 0) {
        this.routerData.forEach((value, index) => {
          if (value.name == this.getActiveMenuItem.name) {
            let containWidth = $(".scroll-bar").width();
            let w = 0;
            $(".scroll-bar-wc .ly-tag").each(function (i) {
              if (i <= index) {
                w += parseInt($(this).outerWidth());
              }
            });
            if (w > containWidth) {
              $(".scroll-bar-wc").css({
                left: "-" + (w - containWidth) + "px",
              });
            } else {
              $(".scroll-bar-wc").css({
                left: "0px",
              });
            }

            // nowLleft = Math.min((this.allWidth - containWidth),index);
          }
        });
      }
    },
    showBtn() {
      let containWidth = $(".scroll-bar").width();
      if (this.allWidth > containWidth) {
        this.isShowBtn = true;
      } else {
        this.isShowBtn = false;
      }
    },
    setWidth() {
      let w = 0;
      $(".scroll-bar-wc .ly-tag").each(function () {
        w += parseInt($(this).outerWidth());
      });
      this.allWidth = w;
      $(".scroll-bar-wc").width(w);
      this.showBtn();
    },
    scrollHandle(name) {
      let nowLleft = $(".scroll-bar-wc").position().left;
      let containWidth = $(".scroll-bar").width();
      if (name == "add") {
        nowLleft = Math.min(
          this.allWidth - containWidth,
          Math.abs(nowLleft) + this.scrollLeft
        );
        $(".scroll-bar-wc").animate({ left: "-" + nowLleft + "px" });
      } else {
        nowLleft = Math.max(Math.abs(nowLleft) - this.scrollLeft, 0);
        $(".scroll-bar-wc").animate({ left: "-" + nowLleft + "px" });
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "@/styles/index.less";
.tag-text {
  width: 100px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scroll-bar {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  height: 38px;
  .left-btn {
    position: absolute;
    left: 0;
    height: 38px;
    background: rgba(255, 255, 255, 1);
    width: 38px;
    top: 0;
    z-index: 2;
    cursor: pointer;
    box-shadow: 2px -2px 4px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 16px;
      height: 16px;
    }
  }
  .right-btn {
    position: absolute;
    right: 0;
    height: 38px;
    background: rgba(255, 255, 255, 1);
    width: 38px;
    top: 0;
    z-index: 2;
    cursor: pointer;
    box-shadow: -1px 2px 4px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 16px;
      height: 16px;
    }
  }
  .scroll-bar-wc {
    position: relative;
    left: 0;
    box-sizing: border-box;
    .ly-tag {
      position: relative;
      display: flex;
      float: left;
      justify-content: flex-start;
      align-items: center;
      height: 36px;
      box-sizing: border-box;
      width: 150px;
      padding: 0px 15px 0px 12px;
      text-align: center;
      background: #fff;
      font-size: 14px;
      color: @fontColor_black;
      border: 1px solid #dcdfe6;
      border-bottom-style: none;
      border-top-style: none;
      box-sizing: border-box;
      margin-right: -1px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      span {
        display: inline-block;
      }
      .h-c-dds {
        right: 15px;
        position: absolute;
      }
      &:first-child {
        padding-left: 38px;
      }
      &:last-child {
        .h-c-dds {
          right: 25px;
        }
      }
    }
    .tagActive {
      background: #f0f2f5;
      color: #1890ff;
      border-radius: 10px 10px 0px 0px;
      /deep/ .el-icon-close {
        color: #4d4d4d;
      }
    }
  }
}
</style>